<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>提交订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-bar .mui-icon {
			color: #fff;
		}
		.mui-title {
			color: #fff;
		}
		.mui-bar-tab {
			padding: 0 15px;
			display: flex;
			justify-content: space-between;
			background: #fff;
			align-items: center;
			box-shadow: 0 0 1px rgba(91,169,249,0.6);
		}
		.total-price {
			font-size:12px;
			font-family:PingFang SC;
			color: #333;
		}
		.price-value {
			font-size: 16px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #FE9F00;
		}
		.buy-btn {
			background: linear-gradient(90deg, #FFA308 0%, #FF7E05 100%);
			color: #fff;
		}
		.mui-bar .mui-btn {
			top: 0;
		}
		.info-img {
			position: relative;
		}
		.info-img img {
			width: 100%;
			height: 240px;
		}
		.car-info-back {
			position: relative;
			margin-top: -30px;
			padding: 28px 26px 0 26px;
			width: 100%;
			height: 145px;
			background: url(../img/rentCar/car-info-back.png) no-repeat;
			background-size: 100% 100%;
		}
		.car-title {
			font-size: 17px;
			font-family:PingFang SC;
			font-weight: bold;
			color: #333;
		}
		.car-type-score {
			margin-top: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid #E1E1E1;
			display: flex;
			justify-content: space-between;
		}
		.car-type {
			font-size: 14px;
			font-family:PingFang SC;
			color: #333;
		}
		.car-score {
			font-size: 14px;
			font-family:PingFang SC;
			color: #5BA9F9;
		}
		.rent-time {
			margin-top: 12px;
			font-size: 12px;
			font-family:PingFang SC;
			color: #333;
		}
		.rent-time span {
			margin-right: 15px;
		}
		.day-number {
			color: #5BA9F9;
		}
		.car-material-title {
			margin-top: 10px;
			margin-left: 10px;
			font-size: 15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
		}
		.car-material-title img {
			width: 18px;
			margin-right: 6px;
			vertical-align: bottom;
		}
		.car-material-title span {
			vertical-align: middle;
		}
		.driver-from {
			margin-top: 10px;
			padding: 0 15px;
			margin-bottom: 15px;
		}
		.driver-input {
			padding: 5px 0;
			display: flex;
			border-bottom: 1px solid #EEEEEE;
			align-items: baseline;
		}
		.input-name {
			width: 90px;
			font-size: 14px;
			font-family:PingFang SC;
			color: #999;
		}
		.driver-input input {
			flex: 1;
			border: 0;
			margin-bottom: 0;
			font-size: 15px;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">提交订单</h1>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<div class="total-price">
			金额¥ <span id="totalPrice" class="price-value">0</span>
		</div>
		<button type="button" id="subOrder" class="mui-btn buy-btn">立即支付</button>
	</nav>
	<div class="mui-content">
		<div class="info-img">
			<img id="imgUrl" src="../img/rentCar/rent-car-back.jpg" />
		</div>
		<div class="car-info-back">
			<div id="carName" class="car-title"></div>
			<div class="car-type-score">
				<div id="carType" class="car-type"></div>
				<div id="avgStars" class="car-score">4.3分</div>
			</div>
			<div class="rent-time">
				<span>租期：</span>
				<span class="day-number">0天</span>
				<span></span>
			</div>
		</div>
		<div class="car-material-title">
			<img src="../img/rentCar/car-material.png" />
			<span>填写驾驶员信息</span>
		</div>
		<div class="driver-from">
			<div class="driver-input">
				<div class="input-name">驾驶员姓名</div>
				<input id="userName" type="text" placeholder="请输入姓名" />
			</div>
			<div class="driver-input">
				<div class="input-name">联系手机</div>
				<input id="phone" type="text" placeholder="请输入手机号" />
			</div>
			<div class="driver-input">
				<div class="input-name">Email</div>
				<input id="email" type="text" placeholder="请输入邮箱号码" />
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
		var carId = base.getParameter("carId");
		var rentCarInfo = localStorage.getItem("rentCarInfo");
		var price = base.getParameter("price");
		$(function() {
			//初始化微信 用于支付
			base.initWX(function () {});
			getCarInfo();
		});
		function getCarInfo() {
			var params = {
				customerId: customerId,
				carId: carId
			}
			base.postData(base.url.getCarInfo, params, function(data) {
				if (data.success) {
					var rentCarData = eval('(' + rentCarInfo + ')');
					$("#totalPrice").text(price);
					$("#imgUrl").attr("src", data.extendData.imgUrl);
					$("#carName").html(data.extendData.carName);
					$("#carType").html(data.extendData.gear+"/"+data.extendData.seat+"座/"+data.extendData.carTypeName);
					if (data.extendData.avgStars == 0) {
						$("#avgStars").html("暂无评分");
					}else{
						$("#avgStars").html(data.extendData.avgStars+"分");
					}
					$(".rent-time").html('<span>租期：'+rentCarData.startTime+':00</span><span class="day-number">'+rentCarData.dayNum+'天</span>'+rentCarData.endTime+':00<span></span>');
					
				}
			});	
		}
		//下订单
		$("#subOrder").on('tap', function() {
			var rentCarData = eval('(' + rentCarInfo + ')');
			if ($("#userName").val() == null || $("#userName").val() == '') {
				mui.toast("请填写联系人姓名");
				return;
			}
			if (!testPhone($("#phone").val())) {
				mui.toast("请输入正确的号码");
				return;
			}
			var data = {
				customerId: customerId,
				objId: carId,
				price: price,
				number: rentCarData.dayNum,
				payType: 3,
				travelDate: "",
				name: $("#userName").val(),
				phone: $("#phone").val(),
				startTime: rentCarData.startTime,
				endTime: rentCarData.endTime,
				dayNum: rentCarData.dayNum,
				email: $("#email").val(),
				cityName: rentCarData.cityName,
				adultNum: rentCarData.adultNum,
				childrenNum: rentCarData.childrenNum,
				driverAvg: rentCarData.driverAvg,
				carAddress: rentCarData.carAddress
			}
			base.postData(base.url.addVisaTravelOrder, data, function(data) {
				if (data.success) {
					var orderNo = data.extendData.orderNo;
					var isWechat = base.isOnWx();
					var params = {
						orderNo: orderNo,
						customerId: customerId
					}
					if (isWechat) {
						base.weChatPayTravel(params, function(rse) {
							//支付成功
							mui.toast('支付成功');
							setTimeout(function() {
								window.location.href='admissionOrderList.html?customerId='+customerId+"&orderType=0";
							}, 1000)
						}, function() {
							//取消支付
						}, function() {
							//支付失败
							mui.toast('支付失败，请稍后再试！')
						});
					} else {
						base.postData(base.url.travelOrderPerpayH5,params,function(data) {
							var cfg = data.extendData;
							if (data.success) {
								if(data.extendData.mweb_url) {
									var urlPath = root_host+'ry_visa_web/pages/admissionOrderList.html?customerId='+customerId+"&orderType=0";
									window.location.href = data.extendData.mweb_url+'&redirect_url='+encodeURIComponent(urlPath);
								}
							} else {
								mui.toast(data.message);
							}
						});
					}
				} else {
					mui.toast(data.message);
				}
			});
		});
	</script>
</body>
</html>
